---
title: Farveskema
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Color Scheme Card

Repræsenterer forskellige farveskemaer og er specielt tilpasset til lyse og mørke temaer.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| Egenskaber       | Type                                    | Beskrivelse                                                                                 | Standard |
| ---------------- | --------------------------------------- | ------------------------------------------------------------------------------------------- | -------- |
| variant          | streng                                  | Farveskema varianten. Valgmuligheder inkluderer `Dark`, `Light` og `System` | lys      |
| valgt            | boolean                                 | Hvis `true`, viser flueben for at indikere det valgte farveskema                            |          |
| additional props | `React.ComponentPropsWithoutRef<'div'>` | Standard HTML `div` element props                                                           |          |

</Tab>

</Tabs>

## Color Scheme Picker

Giver brugerne mulighed for at vælge mellem forskellige farveskemaer.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| Egenskaber | Type         | Beskrivelse                                                           |
| ---------- | ------------ | --------------------------------------------------------------------- |
| værdi      | `Farveskema` | Det aktuelt valgte farveskema                                         |
| onChange   | funktion     | Callback-funktionen der aktiveres, når en bruger vælger et farveskema |

</Tab>

</Tabs>
